import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import {ChartSelectorTab} from "../chart-selector";

export interface TrafficMonitorCard {
  id: string;
  title: string;
  imagePath: string;
  backgroundImage: string;
}

export interface TrafficMonitorProps {
  width?: string | number;
  height?: string | number;
  title?: string;
  titleColor?: string;
  titleFontSize?: number;
  titleFontFamily?: string;
  titleFontWeight?: string | number;
  titleLineHeight?: string;
  dateSelector?: {
    dayText?: string;
    monthText?: string;
    yearText?: string;
    dayBgImage?: string;
    selectorBgColor?: string;
    selectorBorderColor?: string;
    textColor?: string;
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    lineHeight?: string;
  };
  cards?: TrafficMonitorCard[];
  cardTextColor?: string;
  cardFontSize?: number;
  cardFontFamily?: string;
  cardFontWeight?: string | number;
  cardLineHeight?: string;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  onDateChange?: (type: 'day' | 'month' | 'year', value: string) => void;
  onCardClick?: (card: TrafficMonitorCard, index: number) => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TrafficMonitor = forwardRef<HTMLDivElement, TrafficMonitorProps>((props, ref) => {
  const {
    width = 504,
    title = '客流相机',
    titleColor = '#FFFFFF',
    titleFontSize = 16,
    titleFontFamily = 'SourceHanSansSC',
    titleFontWeight = 400,
    titleLineHeight = '22px',
    dateSelector = {
      dayText: '日',
      monthText: '月',
      yearText: '年',
      dayBgImage: 'http://localhost:8085/static/images/chuxingfuwu/bj22.png',
      selectorBgColor: 'rgba(5,18,34,0.2)',
      selectorBorderColor: '#3A4E74',
      textColor: 'rgba(255,255,255,0.9)',
      fontSize: 14,
      fontFamily: 'SourceHanSansSC',
      fontWeight: 400,
      lineHeight: '20px'
    },
    cards = [
      {
        id: 'east-exit',
        title: '东出站口',
        imagePath: 'http://localhost:8085/static/images/chuxingfuwu/dczk.png',
        backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123456.png'
      },
      {
        id: 'west-exit',
        title: '西出站口',
        imagePath: 'http://localhost:8085/static/images/chuxingfuwu/xczk.png',
        backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123457.png'
      },
      {
        id: 'south-exit',
        title: '南出站口',
        imagePath: 'http://localhost:8085/static/images/chuxingfuwu/xczk.png',
        backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123457.png'
      },
      {
        id: 'north-exit',
        title: '北出站口',
        imagePath: 'http://localhost:8085/static/images/chuxingfuwu/dczk.png',
        backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123456.png'
      },
    ],
    tabs = [
      { id: 'tab1', text: '1号网约车', isActive: true },
      { id: 'tab2', text: '6号网约车', isActive: false },
      { id: 'tab3', text: '网约车人数', isActive: false }
    ],
    cardTextColor = '#CCCCCC',
    cardFontSize = 16,
    cardFontFamily = 'SourceHanSansSC',
    cardFontWeight = 500,
    cardLineHeight = '16px',
    theme = 'dark',
    style = {},
    className = '',
    noResponsiveScale = false,
    onDateChange,
    onCardClick,
    __designMode,
    componentId,
    _componentName,

    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    ...style
  };

  const titleStyle: React.CSSProperties = {
    color: titleColor,
    fontSize: `${titleFontSize}px`,
    fontFamily: titleFontFamily,
    fontWeight: titleFontWeight,
    lineHeight: titleLineHeight
  };

  const dateTextStyle: React.CSSProperties = {
    color: dateSelector.textColor,
    fontSize: `${dateSelector.fontSize}px`,
    fontFamily: dateSelector.fontFamily,
    fontWeight: dateSelector.fontWeight,
    lineHeight: dateSelector.lineHeight
  };

  const cardTextStyle: React.CSSProperties = {
    color: cardTextColor,
    fontSize: `${cardFontSize}px`,
    fontFamily: cardFontFamily,
    fontWeight: cardFontWeight,
    lineHeight: cardLineHeight
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const handleTabClick = (tab, index: number) => {
    setActiveTabIndex(index)
  };

  const handleCardClick = (card: TrafficMonitorCard, index: number) => {
    if (onCardClick) {
      onCardClick(card, index);
    }
  };

  const trafficMonitorClassName = [
    'traffic-monitor', 
    theme, 
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={trafficMonitorClassName}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="title-wrap">
        <div className="title">{title}</div>
        <div className="tab-selector">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
              onClick={() => handleTabClick(tab, index)}
            >
              {tab.text}
            </div>
          ))}
        </div>
      </div>
      <div className="monitor-cards">
        {cards.map((card, index) => (
          <div
            key={card.id}
            className="monitor-card"
            onClick={() => handleCardClick(card, index)}
          >
            <div
              className="card-image"
              style={{
                backgroundImage: card.backgroundImage ? `url(${card.backgroundImage})` : undefined
              }}
            >
              <span className="number-str">22</span>
            </div>
            <div className="card-title" style={cardTextStyle}>
              {card.title}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
});

TrafficMonitor.displayName = 'TrafficMonitor';

export default TrafficMonitor;
